<template>
    <div class="topNav_box">
        <!-- <div class="icon_box" @click="toggleHandle">
            <el-icon v-if="isCollapse1" :size="16">
                <ArrowRight />
            </el-icon>
            <el-icon v-if="!isCollapse1" :size="16">
                <ArrowLeft />
            </el-icon>
        </div> -->
        <!-- <button @click="scrollNav">左</button>
        <button @click="scrollNav1">右</button> -->

        <!-- <el-tabs v-model="defaultTab" type="card" closable class="demo-tabs" @tab-click="handleTabsEdit"
            @tab-remove="removeHandle">
            <el-tab-pane v-for="(item, index) in navMenuList" :key="item.id" :label="item.label" :name="item.id">
            </el-tab-pane>
        </el-tabs> -->
        <nav ref="navbar" class="navbar">
            <div class="nav_box">
                <div :class="{ 'nav_li': true, 'nav_li_active': item.id == defaultTab }"
                    v-for="(item, index) in dataList" :key="item.id" @click="navHandleClick(item)">
                    <p>{{ item.label }}</p>
                    <el-icon v-if="!isCollapse1" :size="14" @click.stop="removeHandle(item.id)">
                        <Close />
                    </el-icon>
                </div>
            </div>
        </nav>
    </div>
</template>
<script>
import editPassword from "@/components/baseInfo/editPassword.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { httpService } from "@/utils/httpService";
import { ArrowDown, Expand, Fold, ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'
import { mapState, mapActions } from 'vuex';
import { loadRouteLocation } from "vue-router";

export default {
    name: "Header",
    data() {
        return {
            flag: false,
            editableTabsValue: null,
            dataList: [],
            navId: '',
            navLabel: '',
            oldLength: 0,
            btnFlag: false,
        };
    },
    setup() {

    },
    computed: {
        ...mapState(['navMenuList', 'isCollapse1', "defaultTab", "indexPath"]),// 映射仓库中的状态到组件
        dataList() {
            this.oldLength = this.navMenuList.length
            return this.navMenuList
        },

    },
    components: {
        editPassword, ElMessageBox, ArrowDown, Expand, Fold, ArrowLeft, ArrowRight, Close,
    },
    created() {
    },
    mounted() {
        this.flag = this.$store.state.isCollapse1

    },
    watch: {
        oldLength(newValue, oldValue) {
            const div1 = document.querySelector('.navbar');
            const div2 = document.querySelector('.nav_box');
            const div1Width = div1.offsetWidth;
            const div2Width = div2.scrollWidth;
            if (newValue != oldValue) {
                if (div1Width < div2Width) {
                    this.btnFlag = true
                } else {
                    this.btnFlag = false
                }
            }
        },
    },
    methods: {
        ...mapActions(['uploadDel', 'isCollapse', 'uploadtoggle', "uploadTabId", "uploadDelTabId"]),

        handleTabsEdit(value) {
            console.log(value);
            const navArr = this.$store.state.navMenuList.filter(item => item.label == value.props.label)
            if (navArr) {
                //删除的时候，如果携带参数把参数传递过去
                if (navArr[0].path.indexOf('?') != -1 || navArr[0].path.indexOf('？') != -1) {
                    const nowPath = navArr[0].path.split("?")
                    const nowKey = nowPath[1].split('=')[0]
                    const nowKeyValue = nowPath[1].split('=')[1]
                    const pathQurty = {}
                    pathQurty[nowKey] = nowKeyValue;
                    this.$router.push({
                        path: nowPath[0],
                        query: pathQurty
                    })
                    this.uploadTabId(navArr[0].id)

                } else {
                    this.$router.push({ path: navArr[0].path })
                    this.uploadTabId(navArr[0].id)
                }
            }
        },
        removeHandle(value) {
            const oldTab = this.$store.state.defaultTab
            this.uploadDel(value)
            this.uploadDelTabId(value)
            const newTab = this.$store.state.defaultTab
            const menuLisst = this.$store.state.navMenuList
            if (oldTab != newTab) {
                if (menuLisst.length > 0) {
                    const path = menuLisst[menuLisst.length - 1].path
                    //删除的时候，如果携带参数把参数传递过去
                    if (path.indexOf('?') != -1 || path.indexOf('？') != -1) {
                        const nowPath = path.split("?")
                        const nowKey = nowPath[1].split('=')[0]
                        const nowKeyValue = nowPath[1].split('=')[1]
                        const pathQurty = {}
                        pathQurty[nowKey] = nowKeyValue;
                        this.$router.push({
                            path: nowPath[0],
                            query: pathQurty
                        })
                    } else {
                        this.$router.push({ path: path })
                    }
                }
            }
        },
        toggleHandle() {
            this.flag = !this.flag
            this.uploadtoggle(this.flag)
        },
        navHandleClick(data) {
            this.navId = data.id
            this.navLabel = data.label
            const navArr = this.$store.state.navMenuList.filter(item => item.id == data.id)
            if (navArr) {
                if (navArr[0].path.indexOf('?') != -1) {
                    const nowPath = navArr[0].path.split("?")
                    const nowKey = nowPath[1].split('=')[0]
                    const nowKeyValue = nowPath[1].split('=')[1]
                    const pathQurty = {}
                    pathQurty[nowKey] = nowKeyValue;
                    this.$router.push({
                        path: nowPath[0],
                        query: pathQurty
                    })
                    this.uploadTabId(navArr[0].id)

                } else {
                    this.$router.push({ path: navArr[0].path })
                    this.uploadTabId(navArr[0].id)
                }
            }
        },
        scrollNav() {//向左
            const nav = this.$refs.navbar;
            if (nav) {
                nav.scrollBy({
                    left: 500, // 根据需要调整滑动的像素值,
                    behavior: 'smooth' // 平滑滚动
                });
            }
        },
        scrollNav1() {//向右
            const nav = this.$refs.navbar;
            if (nav) {
                nav.scrollBy({
                    left: -500,
                    behavior: 'smooth'
                });
            }
        },
        getWidth() {
            const div1Width = document.querySelector('.navbar').offsetWidth;
            const div2Width = document.querySelector('.nav_box').scrollWidth;

            // console.log(234, div1Width, div2Width,);
        },
    }
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

body {
    margin: 0;
    padding: 0;
}

.topNav_box {
    height: 40px;
    display: flex;
}

.icon_box {
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 22px;
    margin: 5px 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 0 7px;
}

.el-tabs {
    background-color: #fff;
}

.el-tabs__new-tab {
    display: none !important;
}

.is-icon-plus {
    display: none !important;
}

.el-tabs--top {
    width: calc(100vw - 280px);
}

.nav_box {
    display: flex;
    margin-top: 5px;
    position: relative;
}

.nav_li {
    height: 30px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    margin-right: 5px;
    padding: 0 15px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: #666;
}

.nav_li_active {
    background-color: #007FFF;
    color: #fff;
}

.nav_li_active .el-icon {
    color: #fff;
}

.nav_li .el-icon {
    margin-left: 10px;
    margin-top: 2px;
}

.navbar {
    /* width: calc(100vw - 300px); */
    width: calc(100vw - 270px);
    /* display: flex; */
    overflow-x: hidden;
    white-space: nowrap;
}
</style>